<template>
    <div class="box">
        <div class="logo">
            <img width="180rem" height="180rem" src="../../img/咔瓦学考.png" />
        </div>
        <van-form @submit="onSubmit">
            <van-cell-group class="inp" inset>
                <span>用户名：</span><input type="text" placeholder="请输入用户名" v-model="username" required />
                <br />
                <span>姓名：</span><input type="text" placeholder="请输入真实姓名" v-model="name" required />
                <br />
                <span>密码：</span><input type="password" placeholder="请输入密码" v-model="password" required />
                <br />
                <span>重复密码：</span><input type="password" placeholder="请再次输入密码" v-model="rePassword" required />
            </van-cell-group>
            <van-cell-group inset class="yanz">
                <span>手机号：</span><input class="in" type="text" placeholder="请输入真实手机号" v-model="phone" required /><van-button @click="toget" class="yan" :disabled="btnTime !== 5">{{ btnText }}</van-button>
                <span>验证码：</span><input class="in" type="text" placeholder="请输入验证码" v-model="msg" required /><van-button @click="toyan" class="yan" >发送验证码</van-button>
            </van-cell-group>
            <span class="login">已有账号？<span class="dl" @click="todl">立即登录</span></span>
            <div style="margin: 16px">
                <van-button :disabled="btnFlag" round block type="primary" native-type="submit">
                    注 册
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import type { Ref } from "vue";
import { admin, sendCode, verify } from "@/api/login";
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from "vue-router";

const router = useRouter()

const username: Ref<string> = ref('');
const name: Ref<string> = ref('');
const phone: Ref<string> = ref('');
const password: Ref<string> = ref('');
const rePassword: Ref<string> = ref('');
const msg: Ref<string> = ref('');
const btnTime: Ref<number> = ref(5);
const btnText: Ref<string> = ref("获取验证码");


// 注册事件
async function onSubmit() {
    if (password.value !== rePassword.value) {
        return showFailToast("两次输入密码不同");
    }

    const { data } = await admin({
        username: username.value,
        password: password.value,
        name: name.value
    })

    if (data.code !== 200) {
        return showFailToast(data.message);
    }
    showSuccessToast(data.message);


    // 跳转到登录页面
    router.push("/login");

    window.localStorage.removeItem('code2')

}

function todl() {
    router.push("/login")
}
// 获取验证码
async function toget() {
    btnText.value = "5s后重获取";
    btnTime.value--;

    const timerId = setInterval(() => {
        btnText.value = `${btnTime.value}s后重获取`;
        btnTime.value--;

        if (btnTime.value === -1) {
            clearInterval(timerId);

            btnText.value = "获取验证码";
            btnTime.value = 5;
        }
    }, 1000);

    const { data } = await sendCode({
        phone: phone.value
    })  
    if (data.code !== 200) {
        return showFailToast(data.message);
    }
    showSuccessToast(data.message);

    window.localStorage.setItem('verificationCode', data.verificationCode)
    window.localStorage.setItem('expirationTime', data.expirationTime)

    msg.value = data.verificationCode
}
// 发送验证码
async function toyan() {
    const { data } = await verify({
        expirationTime:  window.localStorage.getItem('expirationTime') + '',
        code: msg.value,
    }) 
    // console.log(data.code);
    
    if (data.code !== 200) {
        return showFailToast(data.message);
    }
    
    showSuccessToast(data.message);

    window.localStorage.setItem('code2', data.code)

    
}
// 根据输入框的内容, 控制按钮能否点击
const btnFlag = computed(() => {
    if(username.value !== '' && name.value !== '' && password.value !== '' && phone.value !== '' && msg.value !== '' ) {
        return false
    } else {
        return true
    }
});


</script>

<style scoped >
.box {
    height: 100%;
}

img {
    margin: 20px 97px 20px;
}

.inp {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
}

button {
    margin-top: 10px;
}

input {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 240px;
}

.login {
    margin-left: 230px;
}

.dl {
    color: #61affd;
}

.yanz {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
}
.in {
    width: 138px;
}
.yan {
    height: 38px;
}
</style>